<template>
	<div>
		<div class="room-item">
			<div class="room-title">
				<img class="room-title-img" src="@/assets/images/room.png">
				<div class="room-title-name-sw">{{roomName}}</div>
			</div>
			<!-- 传感器 -->
			<div style="margin: 0.25rem 1rem;overflow: hidden;">
				<div class="sensor-item room-color"> <img class="sensor-img" src="@/assets/images/station2.png">湿度:100hPa </div>
				<div class="sensor-item room-color"> <img class="sensor-img" src="@/assets/images/sense1.png">驻波: </div>
				<div class="sensor-item room-color"> <img class="sensor-img" src="@/assets/images/sense3.png">温度: </div>
				<div class="sensor-item room-color"> <img class="sensor-img" src="@/assets/images/sense2.png">电流: </div>
				<div class="sensor-item room-color"> <img class="sensor-img" src="@/assets/images/sense6.png">电压:西北风</div>
				<div class="sensor-item room-color"> <img class="sensor-img" src="@/assets/images/sense5.png">功率:100级</div>
			</div>
			<!-- 摄像头 -->
			<div style="height: 8.2rem;background: rgba(0, 0, 0, 0.1);">
				<sw-video style="width: 14rem;height: 7.5rem;margin:0 0.45rem;overflow: hidden;" v-for="video, index in videoList"
					:url="video.url" :name="video.name" :key="video.name" v-show="index < showNum"
					@fullscreen="fullscreenChange"></sw-video>
			</div>
			<!-- 电台 -->
			<div>
				<radio-tag v-for="item in radioList" :radioName="item.name" class="radio-tag-item" style="margin-bottom: 0.25rem;"></radio-tag>
			</div>
		</div>
	</div>
</template>

<script>
import swVideo from './sw-video.vue';
import radioTag from './radio-tag.vue';

export default {
	name: "room_item",
	components: { swVideo, radioTag },
	props: {
		roomName: {type: String}
	},
	data() {
		return {
			// 是否开启全屏
			isFull: false,
			// 能显示多少
			showNum: 1,
			// 起始索引
			startIndex: 0,
			// 循环间隔
			step: 5000,
			// 是否开启了全屏
			isFullscreen: false,
			// 循环函数
			interval: null,
			// 视频列表
			videoListAll: [
				{ url: 'http://192.168.1.107:8090/youyang/102/hls.m3u8', name: '酉阳机房xx' },
				{ url: 'http://192.168.1.107:8090/wanzhou/102/hls.m3u8', name: '万州机房-2' },
				{ url: 'http://192.168.1.107:8090/rongchang/102/hls.m3u8', name: '荣昌机房-3' },
				{ url: 'http://192.168.1.107:8090/qijiang/702/hls.m3u8', name: '綦江机房' },
				{ url: 'http://192.168.1.107:8090/rongchang/202/hls.m3u8', name: '荣昌机房-4' },
				{ url: 'http://192.168.1.107:8090/rongchang/202/hls.m3u8', name: '荣昌机房-42' },
				{ url: 'http://192.168.1.107:8090/rongchang/202/hls.m3u8', name: '荣昌机房-43' },
			],
			// 显示的电台起始索引
			startRadioIndex: 0,
			// 电台循环间隔
			stepRadio: 2000,
			// 电台循环函数
			intervalRadio: null,
			// 电台能显示多少
			showRadioNum: 5,
			// 电台列表
			radioAllList: [
				{name:'电台1'},
				{name:'电台2'},
				{name:'电台3'},
				{name:'电台4'},
				{name:'电台51'},
				{name:'电台6'},
				{name:'电台71'},
				{name:'电台8'},
				{name:'电台9'},
				{name:'电台10'},
			]
		};
	},
	watch: {
		// 存在全屏的视频则停止滚动
		isFullscreen(val) {
			if (val) {
				if (this.interval) clearInterval(this.interval);
			} else {
				this.start()
			}
		},
	},
	computed: {
		videoList() {
			let startList = [];
			let endList = []
			if (this.videoListAll && this.videoListAll.length > 0) {
				for (let i in this.videoListAll) {
					if (i < this.startIndex) {
						endList.push(this.videoListAll[i])
					} else {
						startList.push(this.videoListAll[i])
					}
				}
			}
			let list = startList.concat(endList);
			return list.splice(0, this.showNum + 2) || [];
		},
		// 显示的电台列表
		radioList() {
			let startList = [];
			let endList = []
			if (this.radioAllList && this.radioAllList.length > 0) {
				for (let i in this.radioAllList) {
					if (i < this.startRadioIndex) {
						endList.push(this.radioAllList[i])
					} else {
						startList.push(this.radioAllList[i])
					}
				}
			}
			let list = startList.concat(endList);
			return list.splice(0, this.showRadioNum) || [];
		},
	},
	created() {
		this.init();
		// 启动循环
		// this.startRadio()
		// 适配分辨率
		window.addEventListener('resize', () => this.init())
	},
	mounted() {
		this.$nextTick(() => {
			try {
				if (this.showNum < this.videoListAll.length) this.start()
			} catch (e) { console.log('计算出错', this.id) }

		})
	},
	methods: {
		init() {
			// 10rem
			let innerWidth = window.innerWidth;
			let innerHeight = window.innerHeight;
			let domH = 8.4; // 每行高度为2.5rem
			let rem = (innerWidth / 1920) * 20;
			let titleHeight = 19.75 * rem;
			let heith = innerHeight - titleHeight
			this.showRadioNum = Math.ceil(heith / (rem * domH));
			this.startRadio()
		},
		// 开始循环
		start() {
			if (this.interval) clearInterval(this.interval);
			this.interval = setInterval(() => {
				if (this.videoListAll && this.videoListAll.length > 0) {
					if (this.startIndex < this.videoListAll.length - 1) {
						this.startIndex++
					} else {
						this.startIndex = 0
					}
				}
			}, this.step)
		},
		// 开始循环电台
		startRadio() {
			if (this.intervalRadio) clearInterval(this.intervalRadio);
			this.intervalRadio = setInterval(() => {
				if (this.radioAllList && this.radioAllList.length > 0) {
					if (this.startRadioIndex < this.radioAllList.length - 1) {
						this.startRadioIndex++
					} else {
						this.startRadioIndex = 0
					}
				}
			}, this.stepRadio)
		},
		// 是否开启了全屏
		fullscreenChange(isFullscreen) {
			this.isFullscreen = isFullscreen;
		},
	},
	beforeDestroy() {
		window.removeEventListener('resize', () => this.init())
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
